
<template>
    <el-dropdown>
        <icon-svg name="l-height" class="fs-20 mr-20 density-setting"></icon-svg>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in btns" :key="item.value" @click="menuClick(item.value)">
                    <span :class="{ active: currentValue === item.value }">{{ item.label }}</span></el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<script lang="ts">
export default {
    name: 'DensityConfig'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps(['table'])
const { table } = props

const btns = ref([
    { value: 'default', label: '默认' },
    { value: 'middle', label: '中等' },
    { value: 'small', label: '紧凑' },
])

const currentValue = ref('default')

const menuClick = (val) => {
    console.log('val', val);
    currentValue.value = val
    if (val === 'small') {
        table.headerCellClassName = () => {
            return 'padding-cell'
        }
        table.cellClassName = () => {
            return 'padding-cell'
        }
    } else if (val === 'middle') {
        table.headerCellClassName = () => {
            return 'middle-cell'
        }
        table.cellClassName = () => {
            return 'middle-cell'
        }
    } else {
        table.headerCellClassName = () => {
            return ''
        }
        table.cellClassName = () => {
            return ''
        }
    }
}


</script>
<style lang="scss" scoped>
.density-setting {
    font-size: 20px;
    cursor: pointer;

    &:focus {
        outline: none;
    }

}

.active {
    color: $primary--color;
}
</style>
<style lang="scss">
.el-table {

    .el-table__header-wrapper .el-table__header,
    .el-table__body-wrapper .el-table__body {
        .bg-cell {
            background-color: #f1f1f1;
        }

        .middle-cell {
            padding: 4px;

            .cell {
                line-height: 1.2em;
            }
        }

        .padding-cell {
            padding: 2px;

            .cell {
                line-height: 1em;
            }
        }
    }
}
</style>